<script lang='ts' setup>
import { onMounted, ref } from 'vue';
import { Site } from './config/base';
import Theme from '@/components/Theme.vue'
import Footer from './components/Footer.vue';
import { ThemeEnum } from './models/app.context';
import router from './router';

const menus = ref([
  {
    name: "项目说明",
    href: "https://gitee.com/xu-zhanwei/chatanywhere/blob/master/README.md",
  },
  {
    name: "支持我们",
    href: "https://gitee.com/xu-zhanwei/chatanywhere/blob/master/Support.md",
  },
  {
    name: "免费缘由",
    href: "https://gitee.com/xu-zhanwei/chatanywhere/blob/master/purpose.md",
  },
  {
    name: "隐私保护",
    href: "https://gitee.com/xu-zhanwei/chatanywhere/blob/master/security.md",
  },
])


function toWorkingEdition(): void {
  router.push("/chat/working-edition")
  // window.open("https://www.zaiwen.top/chat-research#home", '_self')
}
function toYouthVersion(): void {
  router.push("/chat/online-search")
  // window.open("https://zaiwen.top/chat-another", '_self')
}
function toAiDraw(): void {
  router.push("/chat/aidraw")
  // window.open("https://www.zaiwen.top/chat-research#/draw", '_self')
}
function toDocumentQA(): void {
  router.push("/chat/documentQA")
  // window.open("https://www.zaiwen.top/chat-research#/chatfile", '_self')
}

let clientWidth = 0;
onMounted(() => {
  clientWidth = document.body.clientWidth
  draw(clientWidth / 10)
  window.onresize = () => {
    if (document.body.clientWidth - clientWidth > 200) {
      clientWidth = document.body.clientWidth
      draw(clientWidth / 10)
    }
  }
})

function draw(particleCount: number = 100): void {
  const canvas: any = document.getElementById('canvas');
  if (!canvas) return;
  const context = canvas.getContext('2d');
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
  const particles = [];
  function Particle(x, y, directionX, directionY, size, color) {
    this.x = x;
    this.y = y;
    this.directionX = directionX;
    this.directionY = directionY;
    this.size = size;
    this.color = color;
  }

  Particle.prototype.draw = function () {
    context.beginPath();
    context.arc(this.x, this.y, this.size, 0, Math.PI * 2, false);
    context.fillStyle = this.color;
    context.fill();
  };

  Particle.prototype.update = function () {
    if (this.x + this.size > canvas.width || this.x - this.size < 0) {
      this.directionX = -this.directionX;
    }
    if (this.y + this.size > canvas.height || this.y - this.size < 0) {
      this.directionY = -this.directionY;
    }
    this.x += this.directionX;
    this.y += this.directionY;
  };

  function init() {
    for (let i = 0; i < particleCount; i++) {
      const x = Math.random() * canvas.width;
      const y = Math.random() * canvas.height;
      const directionX = (Math.random() - 0.5) * 2;
      const directionY = (Math.random() - 0.5) * 2;
      const size = Math.random() * 2;
      const color = 'white';

      particles.push(new Particle(x, y, directionX, directionY, size, color));
    }
  }
  function connectParticles() {
    for (let a = 0; a < particles.length; a++) {
      for (let b = a; b < particles.length; b++) {
        const distance = Math.sqrt((particles[a].x - particles[b].x) ** 2 + (particles[a].y - particles[b].y) ** 2);
        if (distance < 80) {
          context.beginPath();
          const theme = localStorage.getItem('theme');
          context.strokeStyle = theme == ThemeEnum.Light ? "rgba(0,0,0,0.2)" : 'rgba(100,100,100,0.2)';
          context.moveTo(particles[a].x, particles[a].y);
          context.lineTo(particles[b].x, particles[b].y);
          context.stroke();
        }
      }
    }
  }
  function animate() {
    setTimeout(() => {
      requestAnimationFrame(animate);
    }, 5);
    context.clearRect(0, 0, canvas.width, canvas.height);
    for (let i = 0; i < particles.length; i++) {
      particles[i].update();
      particles[i].draw();
    }
    connectParticles();
  }
  init();
  animate();
}

</script>
<template>
  <div class="index flex-c">
    <canvas class="canvas" id="canvas"></canvas>
    <div class="nav flex">
      <div class="menus flex">
        <Theme :show="true" class="menu"></Theme>
        <a class="menu" :href="item.href" target="_black" v-for="item in menus" :key="item.name">{{ item.name }}</a>
      </div>

    </div>
    <div class="main flex-c">
      <div class="flex-c ">
        <img class="logo" src="@/assets/logo.png" alt="">
        <p> {{ Site.slogan }} </p>
      </div>
      <div class="group grid2">
        <div class="flex-c box" @click="toWorkingEdition">
          <icon-computer size="40" />
          <span class="desc">高效问答</span>
        </div>
        <div class="flex-c box" @click="toYouthVersion">
          <icon-mobile size="40" />
          <span class="desc">在线检索</span>
        </div>
        <div class="flex-c box" @click="toAiDraw">
          <icon-robot size="40" />
          <span class="desc">随心作画</span>
        </div>
        <div class="flex-c box" @click="toDocumentQA">
          <icon-file size="40" />
          <span class="desc">文档分析</span>
        </div>
      </div>
      <div class="quote">
        <p>
          “哲学家们只是用不同的方式解释世界，问题在于改变世界。”
        </p>
      </div>
      <div class="quote_author">
        <p>
          ——卡尔·马克思
        </p>
      </div>
    </div>
    <Footer></Footer>

  </div>
</template>
<style lang='scss' scoped>
.index {
  width: 100vw;
  height: 100vh;
  background: var(--color-bg-2);
  color: var(--color-text-2);
  position: relative;
  overflow: hidden;
  font-size: 15px;

  .canvas {
    position: absolute;
    top: 0;
    left: 0;
  }
  .quote {
    margin-top: 20px;
    font-size: 16px;
    text-align: center;
    color: #666;
  }
  .quote_author {
    margin-top: 10px;
    font-size: 14px;
    color: #999;
    float: right; 
  }
  .nav {
    padding: 15px 20px;
    width: 100%;
    justify-content: center;
    z-index: 1;

    .menus {
      justify-content: center;

      .menu {
        margin: 0 10px;
        display: block;
        color: var(--color-text-2);
        cursor: pointer;
        width: max-content;
      }
    }
  }


  .main {
    width: 100%;
    flex: 1;
    justify-content: center;
    z-index: 1;

    .logo {
      margin-bottom: 20px;
      width: 7em;
    }

    .group {
      width: 70%;
      max-width: 500px;
      margin: 20px auto;
    }

    .box {
      width: 100%;
      max-width: 500px;
      justify-content: center;
      padding: 30px;
      border-radius: var(--border-radius-small);
      background: #bfe5ff24;
      cursor: pointer;

      &:hover {
        box-shadow: 0 0 5px var(--color-border-4);
      }

      .desc {
        margin-top: 10px;
        font-size: var(--font-size-title-3);
        width: max-content;
      }
    }
  }


}
</style> 